<section>
  <form fuiForm labelFlex="1" inputFlex="4" addon>
    <fui-form-item label="Single Input">
      <fui-input prefix="user" suffix="star" name="single" ngModel required></fui-input>
    </fui-form-item>
    <fui-form-item label="Text item">
      <div fuiFormItemText>
        Text
      </div>
    </fui-form-item>
    <fui-form-item label="With addon">
      <fui-input name="addon" ngModel required></fui-input>
      <svg fuiIcon="info-circle" fuiFormItemAddon></svg>
    </fui-form-item>
    <fui-form-item label="Datepicker">
      <fui-datepicker-input name="date" ngModel [datepicker]="picker" required></fui-datepicker-input>
      <fui-datepicker #picker></fui-datepicker>
    </fui-form-item>
    <fui-form-item label="Textarea">
      <fui-textarea name="textarea" ngModel required></fui-textarea>
    </fui-form-item>
    <fui-form-item label="Textarea resize vertical">
      <fui-textarea name="textarea" ngModel resizeVertical="true" required></fui-textarea>
    </fui-form-item>
    <fui-form-item label="Two Input">
      <div class="two-input">
        <fui-input name="t1" ngModel required></fui-input>
        <fui-input name="t2" ngModel required></fui-input>
      </div>
    </fui-form-item>
    <fui-form-item label="Custom Error">
      <fui-input name="error" ngModel required [errorMsgs]="{'required': 'GA.FORM.ERROR.NAME_REQUIRED'}"></fui-input>
    </fui-form-item>
  </form>
</section>
